<style lang="less">
@import "../../styles/common.less";
</style>

<template>
  <div>
    <div v-show="show">
      <Row type="flex" justify="space-between">
        <Row>
          <Input
            v-model="meet_name"
            @on-enter="searchRecord"
            placeholder="请输入会议名称..."
            style="width:150px;margin-right:8px"
          ></Input>
          <Select v-model="meet_id" style="width:150px;margin-right:8px" placeholder="请选择会议">
            <Option value key>不限</Option>
            <Option
              v-for="item in meetingList"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
          <Button @click="searchRecord" type="primary">查询</Button>
        </Row>
        <Row>
          <Button type="primary" icon="ios-plus-outline" @click="handleAddparticipant">添加人员</Button>
        </Row>
      </Row>
      <Table
        class="margin-top-10"
        ref="participantTable"
        :columns="participantColumn"
        :data="participantDataList"
        :loading="participantLoading"
      ></Table>
      <Row type="flex" justify="end" class="margin-top-10">
        <Page
          :total="totalParticipant"
          :current="currentPage"
          :page-size="pageSize"
          @on-change="getParticipant"
          show-total
        >显示第{{currentIndex + 1}}-{{currentIndex + pageSize}}条，总数为{{totalParticipant}}条</Page>
      </Row>
      <EditGuestModal ref="editGuestModal" @updated="updated"/>
      <AddParticipantModal ref="addParticipant" @updated="updated"/>
      <FeatureModal ref="featureModal"/>
    </div>
  </div>
</template>

<script>
import Utils from "@/libs/util";
import ME from "@/controllers/meeting";
import DateUtils from "../../../node_modules/iview/src/utils/date";
import iconEdit from "../../images/edit.png";
import iconPwd from "../../images/password.png";
import iconStop from "../../images/stop.png";
import iconRestart from "../../images/restart.png";
import iconDelete from "../../images/delete.png";
import iconInvite from "../../images/attendanceRecord.png";
import iconMembers from "../../images/feature.png";

import Tooltip from "../../../node_modules/iview/src/components/tooltip/tooltip";
import Btn from "../../../node_modules/iview/src/components/button/button";
import Constant from "../../libs/constants";
import fakeAvatar from "../../images/default_avatar.png";
import EditGuestModal from "./components/EditGuestModal";
import AddParticipantModal from "./components/AddParticipantModal";
import FeatureModal from "./components/FeatureModal";

import {
  getStaffData,
  getAvatar,
  addOrUpdateStaff,
  deleteUser,
  getDepartmentList,
  regFeature,
  getFeature,
  delFeature,
  uploadStaffData,
  registBatch,
  recovery
} from "../../controllers/user";

export default {
  components: {
    AddParticipantModal,
    EditGuestModal,
    FeatureModal,
    Tooltip,
    Btn
  },
  data() {
    return {
      show: true,
      participantDataList: [],
      participantLoading: true,
      pageSize: Constant.PAGE_SIZE,
      currentPage: 1,
      totalParticipant: 0,
      meet_id: this.$route.params.meet_id || "",
      meet_name: "",
      meetingList: [],
      participantColumn: [
        {
          title: "姓名",
          align: "center",
          key: "user_name"
        },
        {
          title: "头像",
          align: "center",
          key: "user_avatar",
          render: (h, { row, column, index }) => {
            let imgSrc = fakeAvatar;
            let encode = row[column.key];
            if (encode) {
              imgSrc = encode;
            }
            return (
              <div>
                <img class="user-avatar" alt="显示头像" src={imgSrc} />
              </div>
            );
          }
        },
        {
          title: "签到时间",
          align: "center",
          key: "report_at"
        },
        {
          title: "公司",
          align: "center",
          key: "user_company"
        },
        {
          title: "联系电话",
          align: "center",
          key: "user_phone"
        },
        {
          title: "操作",
          align: "center",
          width: "220px",
          render: (h, { row, column, index }) => {
            return (
              <div class="operation">
                <Tooltip content="特征" placement="bottom">
                  <Btn
                    style={{ background: `url( ${iconMembers})` }}
                    onClick={() => this.handleFeature(row)}
                  />
                </Tooltip>
                <Tooltip content="编辑" placement="bottom">
                  <Btn
                    style={{ background: `url( ${iconEdit})` }}
                    onClick={() => this.handleEditparticipant(row)}
                  />
                </Tooltip>
                <Tooltip content="删除" placement="bottom">
                  <Btn
                    style={{ background: `url( ${iconDelete})` }}
                    onClick={() => this.handleDelparticipant(row)}
                  />
                </Tooltip>
              </div>
            );
          }
        }
      ]
    };
  },
  async created() {
    this.loadParticipants();
    this.loadMeetings();
  },
  computed: {
    currentIndex: function() {
      return (this.currentPage - 1) * this.pageSize;
    }
  },
  methods: {
    getParticipant(page) {
      this.currentPage = page;
      this.loadParticipants();
    },
    handleQuery() {
      this.loadParticipants();
    },
    handleAddparticipant() {
      this.$refs["editGuestModal"].showAsAdd();
    },
    searchRecord() {
      this.loadParticipants();
    },
    loadMeetings() {
      ME.query(1, this.pageSize).then(res => {
        console.log(res);
        if (res.code !== 0) {
          //非正常就返回空表
          return;
        }
        let data = res.data;
        //检测数据块存在及长度
        if (data === undefined) {
          return;
        }
        this.meetingLoading = false;
        this.totalMeeting = data.total;
        this.formatMeetings(data.result);
      });
    },
    formatMeetings(meetings) {
      let list = [];
      meetings.map(meeting => {
        list.push({
          value: meeting._id,
          label: meeting.meet_name
        });
      });
      this.meetingList = list;
    },
    async loadParticipants() {
      this.participantLoading = true;
      ME.query_user(
        this.currentPage,
        this.pageSize,
        this.meet_id,
        this.meet_name
      )
        .then(res => {
          console.log(res);
          if (res.code !== 0) {
            //非正常就返回空表
            return;
          }
          let data = res.data;
          //检测数据块存在及长度
          if (data === undefined) {
            return;
          }
          this.participantLoading = false;
          this.totalParticipant = data.total;
          this.formatparticipants(data.result);
        })
        .catch(error => {
          console.error(error);
          this.$Message.error("加载失败!");
        });
    },
    formatparticipants(participants) {
      let list = [];
      participants.map(participant => {
        participant.report_at = participant.meet_info.report_at;
        list.push(participant);
      });
      this.participantDataList = list;
    },
    updated() {
      this.loadParticipants();
    },
    onparticipantUpdate(participant) {
      this.$refs["createInvite"].showAsAdd(participant);
    },

    handleDelparticipant(row) {
      this.$Modal.confirm({
        title: "确认",
        content: "移除参会成员【" + row.user_name + "】？",
        onOk: () => {
          // 删除基本信息
          ME.remove_user(row.user_id, row.meet_info.meet_id).then(res => {
            if (res.code === 0) {
              this.$Message.success("删除成功!");
              this.loadParticipants();
            }
          });
        }
      });
    },
    handleParticipant(row) {},
    handleInvite(row) {},
    handleEditparticipant(row) {
      this.$refs["editGuestModal"].showModal(row);
    },
    handleFeature(row) {
      this.$refs["featureModal"].showModal(row);
    }
  }
};
</script>